<!-- 搜索表单 :inline="true" label-width="70px"-->
<template id="search-warpper">
  <el-card
    ref="search-card"
    class="card-box"
    shadow="never"
    :body-style="{ padding: '20px 0px 0px' }"
  >
    <el-form
      v-show="isCollapse"
      ref="search-form"
      :model="formData"
      v-bind="$attrs"
      size="small"
    >
      <el-row style="position:relative;" :gutter="20">
        <!--搜索框选择-->
        <el-col v-for="item in configType" :key="item.prop" :span="span">
          <el-form-item
            :prop="item.prop"
            :label="item.label"
            :label-width="item.labelWidth || '70px' "
          >
            <el-input
              v-if="item.type==='input'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder || '请输入条件'"
            />
            <el-select
              v-if="item.type==='select'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder || '请选择条件'"
            >
              <el-option v-for="iten in item.options" :key="iten.code" :value="iten.value" :label="iten.label" />
            </el-select>
            <el-cascader
              v-if="item.type==='cascader'"
              v-model="formData[item.prop]"
              :options="item.options"
              :placeholder="item.placeholder || '请选择条件'"
              :props="item.props"
              :clearable="false"
            />
          </el-form-item>
        </el-col>
        <!--操作项-->
        <div class="form-operate">
          <el-form-item size="small">
            <el-button
              v-debounce="onSumitFrom"
              type="primary"
              class="btn"
              icon="el-icon-search"
              :disabled="disabled"
            >查询</el-button>
            <el-button
              v-debounce="onResetForm"
              type="default"
              icon="el-icon-refresh-right"
              class="btn"
            >重置</el-button>
            <slot />
          </el-form-item>
        </div>
      </el-row>
    </el-form>
    <div class="search-footer" @click="onChangeCollapse">
      <i
        :class="[
          isCollapse ? 'el-icon-caret-top' : 'el-icon-caret-bottom',
          'collapse-title'
        ]"
      />
      {{ isCollapse ? "收起面板" : "展开面板" }}
    </div>
  </el-card>
</template>
<script>
// import { debounce } from 'lodash';

export default {
  components: {},
  props: {
    configType: {
      type: Array,
      default: () => []
    },
    span: {
      type: Number,
      default: 6
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  inject: ['getSearchPanel', 'countTableHeght'],
  data() {
    const formData = {};
    this.configType.forEach(x => {
      formData[x.prop] = undefined;
    });
    return {
      formData: formData,
      size: 'small',
      disabled: false,
      isCollapse: true
    };
  },
  computed: {

  },
  watch: {
    searchPanel: {
      deep: true,
      handler(val) {
        this.isCollapse = val.collapse;
        this.$nextTick(() => this.countSearchPanelHeight());
      }
    }
  },
  created() {
  },
  mounted() {
    // 初始化时，是否需要请求接口加载数据
    this.$nextTick(() => {
      if (this.isInitData) this.$emit('submit', this.formData);
    });
  },
  methods: {
    onChangeCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$nextTick(() => this.countSearchPanelHeight());
    },
    countSearchPanelHeight() {
      const cardHeight = this.$refs['search-card'].$el.clientHeight;
      this.countTableHeght(cardHeight);
    },
    // 提交表单
    onSumitFrom() {
      const self = this;
      this.$refs['search-form'].validate(valid => {
        console.log(self.formData);
        if (valid) this.$emit('submit', self.formData);
      });
    },
    // 重置表单
    onResetForm() {
      this.$refs['search-form'].resetFields(null);
      this.$nextTick(() => {
        this.$emit('reset', this.formData);
      });
    },
    onExportFile() {
      this.$emit('export', this.formData);
    }
  }
};
</script>
<style lang="scss" scoped>
.file-link {
  // color:#fff;
  font-size: 14px;
  margin-top: -4px;
}
.card-box {
  // position: relative;
  border-radius: 0px;
  border: none !important;

  .form-operate {
    display: inline-block;
    // float: right;
    .btn {
      display: inline-block;
    }
  }
  .search-footer {
    position: relative;
    height: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    color: #d3dce6;
    cursor: pointer;
    top: -10px;
  }
  .search-footer:hover {
    color: #409eff;
  }
}
.card-box::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  position: absolute;
  background: #eee;
  left: 0;
  // top: 50%;
}
.text-content {
  font-size: 14px;
  color: #606266;
}

.separator {
  display: inline-block;
  width: 4%;
  text-align: center;
}
.ant-calendar-week-number {
  .ant-calendar-disabled-cell.ant-calendar-selected-day
    .ant-calendar-date:before {
    left: -1px;
    width: 34px;
    background: transparent;
  }
  .ant-calendar-disabled-cell .ant-calendar-date {
    color: rgba(0, 0, 0, 0.25) !important;
    background: #f5f5f5 !important;
  }
}
.el-date-range-picker__content .el-date-range-picker__header div {
  cursor: auto;
}
</style>
